@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.a4a-connection-modal__title {
	@include heading-x-large;
	margin-block-end: 16px;
}

.a4a-connection-modal__instruction {
	@include body-medium;
	margin-block-end: 24px;
}

.a4a-connection-modal__input-container {
	display: flex;
	gap: 16px;
	flex-direction: column;

	.form-fieldset {
		margin: 0;

		@include break-small {
			width: 70%;
		}
	}

	.button {
		flex-grow: 1;
	}

	@include break-small {
		align-items: flex-end;
		flex-direction: row;
	}
}
